<template>
    <div class="my_content">
        <TitleBar>停车数据</TitleBar>
        <div class="content">
            <div class="box_l">
                <div class="car_text f_14">车辆进出总数</div>
                <div class="car_num">
                    <span class="car_num_l f_24_light">{{ data_1['totalCount'] }}</span>
                    <span class="car_num_r f_12_tm">辆</span>
                </div>
                <div class="car_box">
                    <div class="car_move car_move_l">
                        <CarArrowsBar></CarArrowsBar>
                    </div>
                    <div class="car_img">
                        <!-- <img src="./assets/bottom_right_car.png" alt=""> -->
                        <img :src="require('./assets/bottom_right_car.png')" alt="">
                        <!-- <svg-icon icon-class="largeData-car-svg" /> -->
                    </div>
                    <div class="car_move car_move_r">
                        <CarArrowsBar></CarArrowsBar>
                    </div>
                </div>
            </div>
            <div class="box_r">
                <div class="r_box_item r_box_1">
                    <div class="item_text_l f_14_tm">长期车进入总数</div>
                    <div class="item_text_r">
                        <span class="number f_24_light">{{ data_1['longUserTotalCount'] }}</span>
                        <span class="unit f_12_tm">辆</span>
                    </div>
                </div>
                <div class="r_box_item r_box_2">
                    <div class="item_text_l f_14_tm">临时车进入总数</div>
                    <div class="item_text_r">
                        <span class="number f_24_light">{{ data_1['tempUserTotalCount'] }}</span>
                        <span class="unit f_12_tm">辆</span>
                    </div>
                </div>
                <div class="r_box_item r_box_3">
                    <div class="item_text_l f_14_tm">车位总数</div>
                    <div class="item_text_r">
                        <span class="number f_24_light">{{ data_2['totalNum'] }}</span>
                        <span class="unit f_12_tm">个</span>
                    </div>
                </div>
                <div class="r_box_4">
                    <div class="icon icon_1">
                        <div class="percent">
                            <div class="percent_num">
                                <Progress :progress="data_2.rate/100" :num="1"></Progress>
                                <!-- <span class="f_24_light num_1">{{data_2.rate}}</span> -->
                                <div class="num_text">
                                    <span class="f_24_light num_1">{{data_2.rate}}</span>
                                    <span class="f_12_light num_2">%</span>
                                </div>
                                
                            </div>
                            <div class="text f_14_tm">车位使用率</div>
                        </div>
                    </div>
                    <div class="icon icon_2">
                        <div class="percent">
                            <div class="percent_num">
                                <Progress :progress="data_2.percentage_2/100" :num="2"></Progress>
                                <div class="num_text">
                                    <span class="f_24_light num_1">{{data_2.percentage_2}}</span>
                                    <span class="f_12_light num_2">%</span>
                                </div>
                            </div>
                            <div class="text f_14_tm">临停车占比</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import TitleBar from '../components/TitleBar.vue'
import CarArrowsBar from "./components/CarArrowsBar.vue"
import Progress from "./components/Progress.vue"
import { getParkData_1, getParkData_2 } from "src/api/largeDataScreen"
export default defineComponent({
    components: { TitleBar, CarArrowsBar, Progress },
    inject: ['villageId'],
    data(){
        return{
            bar_color_1: '#FBE5BB',
            bar_color_2: '#77A1EC',
            strokeWidth: 10,
            data_1: {
                totalCount: 0,          // 车辆进出总数        
                longUserTotalCount: 0,  // 长期车进入总数      
                tempUserTotalCount: 0,  // 临时车进入总数
            },
            data_2: {
                totalNum: 0,        // 车位总数
                rate: 0, // 车位使用率
                percentage_2: 0, // 临停车占比
            },
        }
    },
    mounted() {
        this.setIntervalTotalFn()
    },
    destroyed(){
        clearInterval(this.timer);
        this.timer = null;
    },
    methods: {
        setIntervalTotalFn(){
            this.timer = null;
            const villageId = this.villageId
            if(villageId){
                this.getParkData_1(villageId);
                this.getParkData_2(villageId);
                this.timer = setInterval(() => {
                    this.getParkData_1(villageId);
                    this.getParkData_2(villageId);
                }, 20000);
            }
        },
        getParkData_1(villageId){
            getParkData_1({villageId: villageId}).then(res=>{
                if(res.success == true){
                    this.data_1 = {
                        totalCount: res.data.totalCount || 0,
                        longUserTotalCount: res.data.longUserTotalCount || 0,
                        tempUserTotalCount: res.data.tempUserTotalCount || 0,
                        tempUserOutTotalCount: res.data.tempUserOutTotalCount || 0,
                    }
                }
            })
        },
        getParkData_2(villageId){
            getParkData_2({villageID: villageId}).then(res=>{
                if(res.success == true){
                    // 临停车占比 = 临时进入 - 临时出去  ）/  车位总数
                    let temRate = (this.data_1.tempUserTotalCount - this.data_1.tempUserOutTotalCount)/res.data.totalNum
                    // console.log('临时22222---》', this.data_1.tempUserTotalCount, this.data_1.tempUserOutTotalCount, res.data.totalNum, temRate)
                    this.data_2 = {
                        totalNum: res.data.totalNum || 0,
                        rate: Number(res.data.rate) || 0,
                        percentage_2: Number(temRate) || 0,
                    }
                }
            })
        },
        format(percent){
            return String(percent)
        }
    }
})

</script>

<style scoped lang="scss">
    .my_content{
        .content{
            display: flex;
            width: 100%;
            height: 89%;
            font-family: 'OPPOSans';
            font-style: normal;
            .box_l{
                width: 40%;
                // height: 95%;
                background: url("./assets/bottom_right_car_border.png") bottom/100% 100% no-repeat;
                margin-top: 20px;
                margin-right: 0.625rem;
                padding: 0 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;

                .car_text{
                    width: 70%;
                    text-align: center;
                }
                .car_num{
                    width: 70%;
                    height: 38px;
                    line-height: 38px;
                    // display: flex;
                    // align-items: center;
                    // justify-content: center;
                    text-align: center;
                    // padding: 10px 0;
                    background: #0F1520;
                    box-shadow: inset 0px 1px 0px rgba(224, 247, 255, 0.3), inset 0px -1px 0px rgba(224, 247, 255, 0.3);
                    .car_num_l{
                        text-align: right;
                        text-shadow: 0px 0px 6px rgba(224, 247, 255, 0.4);
                    }
                    .car_num_r{
                        text-align: left;
                        margin-top: 4px;
                        margin-left: 4px;
                    }
                }
                .car_box{
                    // display: flex;
                    width: 100%;
                    height: 72%;
                    position: relative;
                    .car_move{
                        // flex: 1;
                        height: 94%;
                        position: absolute;
                        z-index: 100;
                        .car-arrow-bar{
                            height: 100%;
                        }
                    }
                    .car_img{
                        // flex: 5;
                        width: 70%;
                        height: 105%;
                        position: absolute;
                        left: 50%;
                        top: -9px;
                        transform: translatex(-50%);
                        img{
                            width: 100%;
                            height: 110%;
                            // transform: translateY(-4%);
                        }
                    }
                    .car_move_l{
                        left: 6px;
                        top: 6px;
                    }
                    .car_move_r{
                        right: 6px;
                        top: 0;
                        transform: rotateX(180deg);
                    }
                }
            }
            .box_r{
                width: 60%;
                display: flex;
                flex-direction: column;
                font-family: 'OPPOSans';
                font-style: normal;
                font-weight: 400;
                margin-right: 20px;
                margin-top: 20px;
                .r_box_item{
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    // padding-right: 20px;
                    padding: 0 20px 0 10px;
                    .item_text_l{}
                    .item_text_r{
                        .number{}
                        .unit{
                            margin-left: 2px;
                        }
                    }
                }
                .r_box_4{
                    display: flex;
                    flex: 4;
                    align-items: center;
                    flex-direction: row;
                    .icon{
                        width: 100%;
                        height: 100%;
                        flex: 1;
                        display: flex;
                        align-items: center;
                        .percent{
                            width: 100%;
                            height: 100%;
                            // margin-left: 16px;
                            display: flex;
                            flex-direction: column;
                            padding-bottom: 15px;
                            .percent_num{
                                flex: 2;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                padding-bottom: 45px;
                                position: relative;
                                .num_text{
                                    position: absolute;
                                    left: 50%;
                                    transform: translateX(-50%);
                                }
                            }
                            .text{
                                // flex:1;
                                // text-align: center;
                                height: 30px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                    }
                    .icon_1 .percent {
                        .percent_num{
                            background: url("./assets/park_circle_3.png") center/145% 80% no-repeat;
                        }
                        .text{
                            background: url("./assets/park_bg_1.png") center/150% 90% no-repeat;
                        }
                    }
                    .icon_2 {
                        margin-left: 20px;
                        .percent{
                            .percent_num{
                                background: url("./assets/park_circle_4.png") center/145% 80% no-repeat;
                            }
                            .text{
                                background: url("./assets/park_bg_2.png") center/150% 90% no-repeat;
                            }
                        }
                    }
                }
            }
        }
        .f_14{
            font-size: 14px !important;
            color: #E0F7FF !important;
        }
        .f_14_tm{
            font-size: 14px !important;
            color: rgba(224, 247, 255, 0.8) !important;
        }
        .f_12_tm{
            font-size: 12px !important;
            color: rgba(224, 247, 255, 0.8) !important;
        }
        .f_12_light{
            font-size: 12px !important;
            color: #E0F7FF !important;
            text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.5) !important;
            transform: translateY(5px);
            // margin-left: 3px !important;
        }
        .f_24_light{
            font-size: 24px !important;
            color: #E0F7FF !important;
            font-weight: 600 !important;
            text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.5) !important;
        }
        #park_echarts_1{
            width: 200px;
            height: 100px;
            background-color: #fff;
        }
    }
</style>